<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画测试页</title>
    <link rel="stylesheet" href="./../CSS样式声明表/12306.css">
</head>
<body>
    <h1 id="txt">国铁12306.</h1>
    <h2>[2022]</h2> 
    <div class="cir1"></div>
    <div class="cir2"></div>
    <input type="text" placeholder="请输入要查询的信息">
    <svg t="1648706356434" id="search" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8789" width="30" height="30">
        <path d="M467.92892 935.905986a467.92892 467.92892 0 1 1 331.010811-136.918108 466.424325 466.424325 0 0 1-331.010811 136.918108zM467.92892 150.507607a317.46946 317.46946 0 1 0 225.689189 93.284865 315.964865 315.964865 0 0 0-225.689189-93.284865zM771.556109 922.515094l151.587906-151.587905 101.033527 101.108757-151.587905 151.587905z" fill="#272536" p-id="8790"></path>
    </svg><!-- 搜索插图 -->
    <button id="btn1">登录</button>
    <button id="btn2">注册</button>
    <svg t="1648639704855" class="icon1" viewBox="0 0 1774 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3006" width="200" height="200"><path d="M1717.4264 315.39469a36.41017 36.41017 0 0 0 38.42762-33.624167 36.41017 36.41017 0 0 0-38.42762-33.720237h-587.846514c-21.135191 0-41.886106 0-46.113144-0.576414s-24.977953-0.576414-46.113144-0.576414H851.748194a79.160897 79.160897 0 0 0-59.370673 31.702786L595.628108 583.427338a734.832161 734.832161 0 0 1-45.728868 61.580261 163.317384 163.317384 0 0 1-36.025894 29.589267 113.841824 113.841824 0 0 1-28.820714 15.17891 483.515527 483.515527 0 0 1-76.278826 6.340558h-65.615161l-11.624355 17.676705c-5.764143 9.606905-16.908153 27.860024-24.785815 41.40576L301.27254 768.552397c-34.680927 83.003659 18.349188 129.885355 18.349188 129.885355a117.780655 117.780655 0 0 0 67.248335 25.458298h1243.133502a37.562998 37.562998 0 1 0 0-75.029927h-170.618632a37.562998 37.562998 0 1 1 0-75.029928h252.565531a37.562998 37.562998 0 1 0 0-75.125997h-195.692654a34.39272 34.39272 0 1 1 0-68.401163h34.104513a38.42762 38.42762 0 0 0 38.42762-38.42762v-4.899522a38.42762 38.42762 0 0 0-38.42762-38.42762h-63.789849a37.562998 37.562998 0 1 1 0-75.029927h156.68862a37.562998 37.562998 0 1 0 0-75.029928h-107.885543a38.42762 38.42762 0 0 1-38.42762-38.42762v-5.956281a38.42762 38.42762 0 0 1 38.42762-38.42762z" fill="#266FE5" p-id="3007"></path><path d="M453.157707 697.269162a130.461769 130.461769 0 0 0 67.248335-22.095881 195.308378 195.308378 0 0 0 58.409982-57.64143L817.547612 246.321043h-65.903368c-76.85524 0-169.85008 56.58467-212.312599 138.435501l-192.1381 312.896894h1.344967l1.05676-1.729242z" fill="#FFF42C" p-id="3008"></path><path d="M317.027864 685.933014l-0.576415 0.864622 1.441036 0.096069 0.480345-0.960691H317.027864zM722.823529 235.465241L483.707665 606.772117a198.382587 198.382587 0 0 1-58.313913 57.64143 144.776058 144.776058 0 0 1-56.392532 21.423398l53.414391 0.672484a131.42246 131.42246 0 0 0 67.248335-22.095882 197.517966 197.517966 0 0 0 58.409982-57.64143l238.827658-371.306876z" fill="#FFAF2E" p-id="3009"></path><path d="M974.044094 260.923539h-26.034712a14.410357 14.410357 0 0 1 0-28.820715h26.034712a14.410357 14.410357 0 0 1 0 28.820715zM402.433249 712.736279h-1.152829L272.451825 710.910967l205.20349-333.936016c43.327141-83.099728 139.876536-145.736748 224.801576-145.736749h92.322357L541.445164 624.448823c-32.279201 50.628389-92.03415 88.287457-139.011915 88.287456z m-78.87269-29.877474l78.104138 1.056759c36.986584 0.672483 88.671733-33.143822 115.282859-74.837789l224.801576-349.018858h-39.292241c-75.125997 0-160.819589 56.200394-199.535416 130.653908l-0.480345 0.96069zM1760.465334 1001.80805H297.814054c-66.095506 0-68.016887-7.685524-70.226475-16.523877a15.563186 15.563186 0 0 1 8.646214-17.772774l15.947462-8.358007c16.1396-8.0698 82.331176-8.0698 85.117178-8.069801h1423.166901a14.410357 14.410357 0 0 1 9.12656 25.554368 14.12215 14.12215 0 0 1 5.283798 11.04794 14.410357 14.410357 0 0 1-14.410358 14.122151z" p-id="3010"></path><path d="M1760.465334 1024H154.479032a14.410357 14.410357 0 1 1 0-28.820715h1605.986302a14.410357 14.410357 0 0 1 0 28.820715zM121.33521 1024h-16.716015a14.410357 14.410357 0 0 1 0-28.820715h16.716015a14.410357 14.410357 0 0 1 0 28.820715zM66.67192 1024H14.410357a14.410357 14.410357 0 0 1 0-28.820715h52.261563a14.410357 14.410357 0 0 1 0 28.820715z" p-id="3011"></path><path d="M384.276199 89.344216h-28.820715a9.606905 9.606905 0 1 1 0-19.21381h28.820715a9.606905 9.606905 0 0 1 0 19.21381zM376.206398 138.915846a9.606905 9.606905 0 0 1-6.820902-2.786003 9.606905 9.606905 0 0 1 0-13.641805l20.462707-20.462707A9.606905 9.606905 0 1 1 403.490008 115.28286l-20.558776 20.462707a9.606905 9.606905 0 0 1-6.724834 3.170279zM425.778028 159.474622a9.606905 9.606905 0 0 1-9.606905-9.606905v-28.820714a9.606905 9.606905 0 1 1 19.21381 0v28.820714a9.606905 9.606905 0 0 1-9.606905 9.606905zM475.349658 138.915846a9.606905 9.606905 0 0 1-6.820903-2.786003L448.066047 115.28286a9.606905 9.606905 0 1 1 13.641806-13.641805l20.462707 20.462707a9.606905 9.606905 0 0 1 0 13.641805 9.606905 9.606905 0 0 1-6.820902 3.170279zM495.908434 89.344216h-28.820715a9.606905 9.606905 0 1 1 0-19.21381h28.820715a9.606905 9.606905 0 0 1 0 19.21381zM454.88695 60.235294a9.606905 9.606905 0 0 1-6.820903-2.593864 9.606905 9.606905 0 0 1 0-13.641805l20.462708-20.462708a9.606905 9.606905 0 1 1 13.641805 13.641805L461.707853 57.64143a9.606905 9.606905 0 0 1-6.820903 2.593864zM425.778028 48.034525a9.606905 9.606905 0 0 1-9.606905-9.606905V9.606905a9.606905 9.606905 0 0 1 19.21381 0v28.820715a9.606905 9.606905 0 0 1-9.606905 9.606905zM396.669106 60.235294a9.606905 9.606905 0 0 1-6.820903-2.593864l-20.462707-20.654846a9.606905 9.606905 0 0 1 0-13.641805 9.606905 9.606905 0 0 1 13.545736 0L403.490008 43.807487A9.606905 9.606905 0 0 1 403.490008 57.64143a9.606905 9.606905 0 0 1-6.820902 2.593864z" fill="#FFAF2E" p-id="3012"></path><path d="M384.276199 407.140632h-43.231073a9.606905 9.606905 0 0 1 0-19.21381H384.276199a9.606905 9.606905 0 0 1 0 19.21381z" fill="#29ABE2" p-id="3013"></path><path d="M362.948869 428.756168a9.606905 9.606905 0 0 1-9.606904-9.606904v-43.231073a9.606905 9.606905 0 1 1 19.213809 0v43.231073a9.606905 9.606905 0 0 1-9.606905 9.606904zM1598.300779 135.745567a41.40576 41.40576 0 1 1 41.40576-41.40576 41.40576 41.40576 0 0 1-41.40576 41.40576z m0-63.501642a22.19195 22.19195 0 1 0 22.19195 22.095882 22.095881 22.095881 0 0 0-22.19195-22.095882z" fill="#29ABE2" p-id="3014"></path><path d="M533.183225 171.483254a31.990994 31.990994 0 1 1 31.990994-31.990994 32.087063 32.087063 0 0 1-31.990994 31.990994z m0-44.768178a12.777184 12.777184 0 1 0 12.777184 12.777184 12.873253 12.873253 0 0 0-12.777184-12.777184z" fill="#F15A24" p-id="3015"></path><path d="M1475.428464 139.49226m-17.100291 0a17.100291 17.100291 0 1 0 34.200582 0 17.100291 17.100291 0 1 0-34.200582 0Z" fill="#FFF42C" p-id="3016"></path><path d="M273.98893 545.86434m-15.755325 0a15.755324 15.755324 0 1 0 31.510649 0 15.755324 15.755324 0 1 0-31.510649 0Z" fill="#FFF42C" p-id="3017"></path><path d="M241.037246 313.473309m-17.772775 0a17.772774 17.772774 0 1 0 35.545549 0 17.772774 17.772774 0 1 0-35.545549 0Z" fill="#29ABE2" p-id="3018"></path><path d="M1584.370766 528.091566m-17.772774 0a17.772774 17.772774 0 1 0 35.545549 0 17.772774 17.772774 0 1 0-35.545549 0Z" fill="#29ABE2" p-id="3019"></path><path d="M465.070269 232.775307m-14.506426 0a14.506426 14.506426 0 1 0 29.012853 0 14.506426 14.506426 0 1 0-29.012853 0Z" fill="#F15A24" p-id="3020"></path><path d="M1639.226194 608.885637m-14.506427 0a14.506426 14.506426 0 1 0 29.012853 0 14.506426 14.506426 0 1 0-29.012853 0Z" fill="#F15A24" p-id="3021"></path><path d="M1688.605685 314.626138a36.314101 36.314101 0 0 0 38.42762-33.624168 36.41017 36.41017 0 0 0-38.42762-33.720236H1296.93217a38.42762 38.42762 0 0 0-38.42762 38.42762v598.702317a38.42762 38.42762 0 0 0 38.42762 38.42762h304.442818a37.562998 37.562998 0 1 0 0-75.029928h-170.81077a37.562998 37.562998 0 1 1 0-75.029928h252.565532a37.562998 37.562998 0 1 0 0-75.125997h-195.692655a34.39272 34.39272 0 1 1 0-68.401163h34.104513a38.42762 38.42762 0 0 0 38.42762-38.42762V586.021203a38.42762 38.42762 0 0 0-38.42762-38.42762h-63.789849a37.562998 37.562998 0 1 1 0-75.125997h156.68862a37.562998 37.562998 0 1 0 0-75.029928h-107.885543a38.42762 38.42762 0 0 1-38.42762-38.42762v-5.956281a38.42762 38.42762 0 0 1 38.42762-38.427619z" fill="#175196" p-id="3022"></path><path d="M1604.833474 314.626138a36.314101 36.314101 0 0 0 38.42762-33.624168 36.41017 36.41017 0 0 0-38.42762-33.720236h-391.865653a38.42762 38.42762 0 0 0-38.42762 38.42762v598.702317a38.42762 38.42762 0 0 0 38.42762 38.42762H1517.890984a37.562998 37.562998 0 1 0 0-75.029928h-171.098977a37.562998 37.562998 0 1 1 0-75.029928h252.565531a37.562998 37.562998 0 1 0 0-75.125997h-195.692654a34.39272 34.39272 0 1 1 0-68.401163h34.104513a38.42762 38.42762 0 0 0 38.42762-38.42762V586.021203a38.42762 38.42762 0 0 0-38.42762-38.42762H1373.78741a37.562998 37.562998 0 1 1 0-75.125997h156.68862a37.562998 37.562998 0 1 0 0-75.029928h-107.597336a38.42762 38.42762 0 0 1-38.42762-38.42762v-5.956281a38.42762 38.42762 0 0 1 38.42762-38.427619z" fill="#266FE5" p-id="3023"></path><path d="M1587.541045 938.018201H344.311474a132.575288 132.575288 0 0 1-76.85524-28.820715c-2.401726-2.209588-60.331363-54.855427-22.095881-146.313163l6.340557-14.794634c7.973731-13.545736 19.21381-32.663477 25.458298-42.462519 9.606905-16.1396 38.42762-24.497608 61.772399-24.017263h26.611127a251.220565 251.220565 0 0 0 68.209025-10.663664l60.811708-40.44507a361.027489 361.027489 0 0 0 45.824937-55.047566L737.810301 270.91472a93.667323 93.667323 0 0 1 71.379304-38.42762h83.003659a14.410357 14.410357 0 0 1 0 28.820715h-83.003659a64.846608 64.846608 0 0 0-47.169903 25.650436L564.693874 591.208931a401.088282 401.088282 0 0 1-51.204804 61.292054l-1.825312 1.441036-66.767989 43.807486A285.03687 285.03687 0 0 1 365.062389 710.910967h-27.571818a56.296463 56.296463 0 0 0-35.737686 9.606905c-5.860212 9.606905-16.812084 27.667886-24.593677 41.021484l-5.091659 12.104701C241.997936 845.407637 284.940801 885.756638 286.766113 887.48588a104.427057 104.427057 0 0 0 57.64143 21.711606h1243.133502a23.152641 23.152641 0 1 0 0-46.209213h-170.714701a51.973356 51.973356 0 1 1 0-103.850643h252.565531a23.152641 23.152641 0 1 0 0-46.305282h-195.596585a48.803077 48.803077 0 1 1 0-97.221878H1508.284079a24.113331 24.113331 0 0 0 24.017263-24.017262v-4.899522a24.113331 24.113331 0 0 0-24.017263-24.017262h-63.789849a51.973356 51.973356 0 1 1 0-103.850643h156.68862a23.152641 23.152641 0 1 0 0-46.209213H1492.913031a52.934046 52.934046 0 0 1-52.837977-52.837977v-5.956281a52.934046 52.934046 0 0 1 52.837977-52.837978h181.95478a22.28802 22.28802 0 0 0 24.017263-19.213809 22.28802 22.28802 0 0 0-24.017263-19.21381h-587.750445c-19.21381 0-43.327141 0-50.724459-0.768553a14.602496 14.602496 0 0 1-14.986771-15.082841c0.480345-13.930012 13.930012-14.218219 21.903743-14.314288H1191.256215l148.138475 1.248898h335.56919a50.628389 50.628389 0 0 1 52.837978 48.034525 50.628389 50.628389 0 0 1-52.837978 48.034524H1492.913031a24.017262 24.017262 0 0 0-24.017262 24.017263v5.956281a24.017262 24.017262 0 0 0 24.017262 24.017262h107.885543a51.973356 51.973356 0 1 1 0 103.850643h-156.68862a23.152641 23.152641 0 1 0 0 46.209213H1508.284079a52.934046 52.934046 0 0 1 52.837977 52.837977v4.899522a52.837977 52.837977 0 0 1-52.837977 52.837977h-34.104512a20.1745 20.1745 0 1 0 0 39.580448h195.596585a51.973356 51.973356 0 1 1 0 103.946712h-252.949808a23.152641 23.152641 0 1 0 0 46.209213h170.714701a51.973356 51.973356 0 1 1 0 103.850643z" p-id="3024"></path><path d="M1130.828783 314.626138h241.805798c21.135191 0 38.42762 14.218219 38.42762 31.510648s-17.292429 31.414579-38.42762 31.414579h-98.278638c-21.135191 0-38.42762 14.218219-38.42762 31.510648s17.292429 31.414579 38.42762 31.41458h36.794446c21.135191 0 38.42762 14.218219 38.42762 31.510648a32.183132 32.183132 0 0 1-32.759546 31.414579 32.37527 32.37527 0 0 0-32.855615 31.510648c0 17.292429 17.292429 31.414579 38.42762 31.41458H1364.180505c21.135191 0 38.42762 14.218219 38.42762 31.510648s-17.292429 31.414579-38.42762 31.414579H786.229102c-53.414392 0-64.942678-51.204803-28.820715-109.518717L835.800732 391.769584c27.28361-43.615349 82.619383-76.85524 124.889764-76.855239h329.324702" fill="#FFF42C" p-id="3025"></path><path d="M1336.608687 376.206398c21.135191 0 38.42762-14.218219 38.42762-31.510648s-17.292429-31.414579-38.42762-31.414579H1075.973356c-10.183319 0-18.541327 17.292429-18.541327 38.42762v237.770898c0 21.135191 8.742284 38.42762 19.21381 38.427619h250.836289c21.135191 0 38.42762-14.218219 38.42762-31.510648s-17.292429-31.414579-38.42762-31.414579h-41.693968c-21.135191 0-38.42762-14.218219-38.42762-31.510648a32.279201 32.279201 0 0 1 32.855615-31.41458 32.37527 32.37527 0 0 0 33.335961-31.31851c0-17.292429-17.292429-31.414579-38.42762-31.414579h-36.890515c-21.135191 0-38.42762-14.218219-38.42762-31.510648s17.292429-31.414579 38.42762-31.41458z" fill="#FFAF2E" p-id="3026"></path><path d="M1280.408293 377.551365c21.135191 0 38.42762-14.12215 38.42762-31.414579s-17.292429-31.510648-38.42762-31.510648h-253.334083c-6.244488 0-11.432217 17.292429-11.432217 38.427619V590.824655c0 21.135191 5.572005 38.42762 12.392907 38.42762h243.727179c21.135191 0 38.42762-14.12215 38.42762-31.414579s-17.292429-31.510648-38.42762-31.510648h-41.597898c-21.135191 0-38.42762-14.12215-38.42762-31.41458a32.37527 32.37527 0 0 1 32.855615-31.510648 32.183132 32.183132 0 0 0 32.759546-31.414579c0-17.292429-17.292429-31.510648-38.42762-31.510648h-36.794446c-21.135191 0-38.42762-14.12215-38.42762-31.41458s17.292429-31.510648 38.42762-31.510648z" fill="#FFF42C" p-id="3027"></path><path d="M1316.14598 642.509804H738.386715a60.61957 60.61957 0 0 1-56.200394-28.820715c-14.218219-25.746505-8.358007-63.981987 15.659256-102.313538l78.296275-127.867905C805.63505 336.241674 865.678206 299.062951 912.655971 299.062951h412.040154c28.820715 0 52.837977 20.558777 52.837978 45.824937s-23.632986 45.921006-52.837978 45.921006h-98.086499c-12.777184 0-24.017262 7.973731-24.017263 17.004222s11.240079 17.100291 24.017263 17.100291h36.794446c28.820715 0 52.837977 20.558777 52.837977 45.824936a46.593489 46.593489 0 0 1-47.169903 45.921006 17.772774 17.772774 0 0 0-18.445258 17.004222c0 9.606905 11.240079 17.100291 24.017262 17.100291H1316.14598c28.820715 0 52.837977 20.558777 52.837977 45.824936s-24.017262 45.921006-52.837977 45.921006z m-102.601745-28.820715H1316.14598c12.777184 0 24.017262-7.973731 24.017262-17.100291s-11.240079-17.004222-24.017262-17.004222h-41.597899c-28.820715 0-52.837977-20.558777-52.837977-45.921005a46.593489 46.593489 0 0 1 47.265973-45.824937A17.772774 17.772774 0 0 0 1287.325265 470.738343c0-9.030491-11.240079-17.004222-24.017262-17.004222h-36.794446c-28.820715 0-52.837977-20.654846-52.837978-45.921005s23.729055-45.824937 52.837978-45.824937h98.278637c12.873253 0 24.017262-7.973731 24.017263-17.100291s-11.14401-17.004222-24.017263-17.004222H912.655971c-37.562998 0-87.90318 31.510648-112.208649 70.322545l-78.104138 127.867905c-18.15705 28.820715-23.825124 56.968946-14.890703 73.108547a32.183132 32.183132 0 0 0 30.934234 14.506426z" p-id="3028"></path><path d="M362.180317 882.394221a14.602496 14.602496 0 0 1-9.606905-3.170279A83.676142 83.676142 0 0 1 332.494981 855.014542a14.410357 14.410357 0 1 1 25.362229-13.833943 53.318323 53.318323 0 0 0 13.449667 16.043531 14.410357 14.410357 0 0 1-9.12656 25.554367zM331.630359 820.81396A14.410357 14.410357 0 0 1 317.027864 807.556431a106.732714 106.732714 0 0 1 2.786002-33.528098 108.365888 108.365888 0 0 1 12.777184-30.549958A14.410357 14.410357 0 1 1 357.472934 758.945492a73.588892 73.588892 0 0 0-9.606905 22.28802 77.623792 77.623792 0 0 0-2.01745 24.113331 14.506426 14.506426 0 0 1-13.257529 15.467117z" fill="#FFFFFF" p-id="3029"></path><path d="M1484.074679 220.958814h-108.077681a14.410357 14.410357 0 0 1 0-28.820715h108.077681a14.410357 14.410357 0 0 1 0 28.820715zM1570.82503 220.958814H1527.497889a14.410357 14.410357 0 0 1 0-28.820715h43.711418a14.410357 14.410357 0 0 1 0 28.820715z" p-id="3030"></path></svg>
    <!-- 小火车插图 -->
    <div id="box1">
        <div id="card1">
            <a href="">lorem1</a>
            <a href="">lorem2</a>
            <a href="">lorem3</a>
            <a href="">lorem4</a>
            <a href="">lorem5</a>
        </div>
    首页
    </div><!-- 代码结构上存在嵌套关系，会产生冒泡现象，使用w3c提供的stopPropagation(true)阻止冒泡 -->
    <div id="box2">
        <div id="card2">
            <a href="">查询</a>
            <a href="">购票</a>
            <a href="">改签</a>
            <a href="">退票</a>
            <a href="">客服</a>
        </div>
    票务服务
    </div>
    <div id="box3">
        <div id="card3">
            <a href="">车站风采</a>
            <a href="">站点查询</a>
            <a href="">站内导引</a>
            <a href="">综合交通</a>
            <a href="">便民服务</a>
        </div>
    车站导引
    </div>
    <div id="box4">
        <div id="card4">
            <a href="">路线优选</a>
            <a href="">安心出行</a>
            <a href="">车型介绍</a>
            <a href="">旅行咨询</a>
            <a href="">乘车指南</a>
        </div>
    出行指南
    </div>
    <div id="box5">
        <div id="card5">
            <a href="">时刻查询</a>
            <a href="">身份核验</a>
            <a href="">国铁快讯</a>
            <a href="">旅客信用</a>
            <a href="">用户反馈</a>
        </div>
    国铁在线
    </div>

    
    <!-- <script>// 1.box1与card1的js变化
        let b1 = document.getElementById('box1');
        let cd1 = document.getElementsByClassName('card1')[0];
        let fun1_1 = () => {cd1.style.display='block'};
        let fun1_2 = () => {cd1.style.display='none'};
        let fun1_3 = () => {b1.style.borderRadius='20px'};
        let fun1_4 = () => {b1.style.borderRadius='0'};
        b1.onclick = fun1_1;
        b1.onmouseover = fun1_3;
        b1.onmouseleave = fun1_4;
        cd1.onmouseleave = fun1_2;
    </script> -->
    <!-- <script>// 2.box2与card2的js变化/后期考虑通过for循环遍历来解决并简化代码
        let b2 = document.getElementById('box2');
        let cd2 = document.getElementsByClassName('card2')[0];
        let fun2_1 = () => {cd2.style.display='block'};
        let fun2_2 = () => {cd2.style.display='none'};
        let fun2_3 = () => {b2.style.borderRadius='20px'};
        let fun2_4 = () => {b2.style.borderRadius='0'};
        b2.onclick = fun2_1;
        b2.onmouseover = fun2_3;
        b2.onmouseleave = fun2_4;
        cd2.onmouseleave = fun2_2;
    </script> -->
    <script>//3. use for loop to make it come ture（for循环代码优化）
        let arr1 = [box1,box2,box3,box4,box5];
        let cd = [card1,card2,card3,card4,card5];
        for(let i=0;i<arr1.length;i++){
            let fun1_1 = () =>{
                arr1[i].style.borderRadius = '20px';
                cd[i].style.display='block';
                cd[0].style.display='none';
            }
            arr1[i].onclick = fun1_1;
            let fun1_2 = () =>{
                cd[i].style.display='none';
            }
            cd[i].onmouseleave = fun1_2;
            let fun1_3 = () =>{
                arr1[i].style.borderRadius = '0';
            }
            arr1[i].onmouseleave = fun1_3;
            let fun1_4 = (e) =>{
                e.stopPropagation(true);
            }
            cd[i].onclick = fun1_4;
            let fun1_5 = () =>{
                location.href='./../CSS测试/自制12306首页.html';
            }
            arr1[0].onclick = fun1_5;
        }   
    </script>
    <script>// 4.表单元素/按钮的js操作
        let input = document.getElementsByTagName('input')[0];
        let fun2_1 = () =>{
            if(input.value==''){
               alert('请输入要查找的内容！') 
            }}
        let search = document.getElementById('search');
        search.onclick = fun2_1;
        let b1 = document.getElementById('btn1');
        let b2 = document.getElementById('btn2');
        input.onclick = function(){
            input.placeholder='';
        }
        input.onmouseleave = function(){
            input.placeholder='请输入要查询的信息';
        }
        b1.onclick = function(){
            location.href='./../CSS测试/12306登录页.html';
        }
        b2.onclick = function(){
            location.href='./12306登录页.html';
        }
        // 按下按钮跳转到目标页面
    </script>
</body>
</html>